<template>
  <!--
      action: 提交到服务器的地址
      file-list: 显示的文件列表, 格式是对象数组 [ { url: xxx }, { url: xxx }]
      list-type: 文件列表类型
      on-remove: 图片移除时的钩子
   -->
  <div class="upload-img">
    <el-upload
      accept="image/png, image/jpeg"
      :class="{ disabled: value }"
      action="#"
      :file-list="fileList"
      list-type="picture-card"
      :on-remove="handleRemove"
      :on-preview="handlePreview"
      :http-request="handleUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <!-- 图片预览弹框 -->
    <el-dialog
      title="预览"
      :visible="isShow"
      @close="isShow = false"
    >
      <img :src="value" width="100%">
    </el-dialog>
  </div>

</template>

<script>

import COS from 'cos-js-sdk-v5'

export default {
  name: 'UploadImg',
  props: {
    // 接收父传子的value属性（头像地址）
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isShow: false
    }
  },
  computed: {
    fileList: {
      get() {
        return this.value
          ? [{ url: this.value }] : []
      },
      set() {

      }
    }
  },
  methods: {
    // 移除
    handleRemove() {
      // 需要把value清空
      // 子传父，触发input事件，并传递空字符串
      this.$emit('input', '')
    },
    // 预览
    handlePreview() {
      this.isShow = true
    },
    // 上传
    handleUpload({ file }) {
      // file: 选择的图片文件对象
      // 把选择的图片对象发至腾讯云服务器
      // 实例化 cos
      const cos = new COS({

        SecretId: 'AKIDpTsbKXw5H9kPOb7aBEzEtcJlCDY1RRQL',
        SecretKey: '85sfq0CFzeBi82pPm2zrcGBzb1OgEdrs'
      })
      // 调用方法上传
      cos.putObject({
        Bucket: 'pinks-black-1317090704', // 桶名
        Region: 'ap-shanghai', // 地区
        Key: file.name, // 文件名
        Body: file// 文件对象
      }, (err, data) => {
        if (err) {
          return this.$message.success('上传失败')
        }
        // 拿到上传成功的图片地址，同步到父组件中
        this.$emit('input', `https://${data.Location}`)
      })
    }
  }
}
</script>

  <style lang="scss" scoped >
    .el-upload {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 146px;
      height: 146px;
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .el-upload:hover {
      border-color: #409EFF;
    }
    .el-icon-plus {
      font-size: 60px;
      color: #8c939d;
      text-align: center;
    }
    .disabled {
      .el-upload {
        display: none;
      }
    }
  </style>
